<template>
    <el-main>
        <!-- 搜索区域 -->
        <!-- <el-form :model="searchParams" :inline="true" size="default">
            <el-form-item label="商品名称">
                <el-input v-model="searchParams.goodsName" placeholder="输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="买家昵称">
                <el-input v-model="searchParams.buyerName" placeholder="输入买家昵称"></el-input>
            </el-form-item>
            <el-form-item label="投诉类型">
                <el-select v-model="searchParams.reportType" placeholder="选择投诉类型">
                    <el-option v-for="item in reportTypes" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="searchBtn">搜索</el-button>
                <el-button icon="Refresh" @click="resetBtn">重置</el-button>
            </el-form-item>
        </el-form> -->

        <el-table :data="tableData" border stripe style="width: 100%">
            <el-table-column prop="reportId" label="投诉ID" width="120" />
            <el-table-column prop="userId" label="投诉人ID" />
            <el-table-column prop="goodsId" label="商品ID" />
            <el-table-column prop="goodsName" label="商品名称" />

            <el-table-column prop="reportType" label="投诉类型">

                <template #default="scope">
                    <span>{{ getReportTypeLabel(scope.row.reportType) }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="reason" label="投诉原因" />

            <el-table-column prop="createdAt" label="投诉时间" width="180">
                <template #default="scope">
                    {{ formatDate(scope.row.createdAt) }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template #default="scope">
                    <el-button size="small" type="danger" @click="handleReport(scope.row.reportId)">处理投诉</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="searchParams.currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="searchParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 20px">
        </el-pagination>
    </el-main>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getReportListApi, handleReportApi } from '@/api/report'

// 投诉类型列表
const reportTypes = [
    { value: 1, label: '禁售商品' },
    { value: 2, label: '政治敏感' },
    { value: 3, label: '有害信息' },
    { value: 4, label: '假货盗版' },
    { value: 5, label: '其他' }
]

// 搜索参数
const searchParams = reactive({
    goodsName: '',
    buyerName: '',
    reportType: null,
    currentPage: 1,
    pageSize: 10
})

// 表格数据
const tableData = ref([])
const total = ref(0)

// 获取投诉列表
const fetchReportList = async () => {
    try {
        const res = await getReportListApi({
            goodsName: searchParams.goodsName,
            buyerName: searchParams.buyerName,
            reportType: searchParams.reportType,
            currentPage: searchParams.currentPage,
            pageSize: searchParams.pageSize
        })
        if (res.code === 200) {
            tableData.value = res.data.records
            total.value = res.data.total
            console.log(res.data.records)
        }
    } catch (error) {
        ElMessage.error('获取投诉列表失败')
    }
}

// 搜索按钮
const searchBtn = () => {
    searchParams.currentPage = 1
    fetchReportList()
}

// 重置按钮
const resetBtn = () => {
    Object.assign(searchParams, {
        goodsName: '',
        buyerName: '',
        reportType: null,
        currentPage: 1,
        pageSize: 10
    })
    fetchReportList()
}

// 处理投诉
const handleReport = async (reportId) => {
    console.log(reportId)
    try {
        await ElMessageBox.confirm('确认处理该投诉吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        })
        const res = await handleReportApi(reportId)
        if (res && res.code == 200) {
            console.log(res.data)
            ElMessage.success('投诉处理成功')
            fetchReportList()
        } else {
            ElMessage.error(res.msg || '处理失败')
        }
    } catch {
        ElMessage.info('已取消操作')
    }
}

// 获取投诉类型标签
const getReportTypeLabel = (value) => {
    const type = reportTypes.find(item => item.value === value)
    return type ? type.label : '未知类型'
}

// 分页大小改变
const handleSizeChange = (val) => {
    searchParams.pageSize = val
    fetchReportList()
}

// 当前页改变
const handleCurrentChange = (val) => {
    searchParams.currentPage = val
    fetchReportList()
}

// 格式化日期
const formatDate = (dateString) => {
    if (!dateString) return ''
    const date = new Date(dateString)
    return date.toLocaleString()
}

// 初始化加载数据
onMounted(() => {
    fetchReportList()
})
</script>

<style scoped>
.el-main {
    padding: 20px;
}

.el-form-item {
    margin-right: 20px;
}

.el-table {
    margin-top: 20px;
}
</style>
